<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeartSheep</title>
    <style>
        *{margin: 0;padding: 0;box-sizing:border-box;}
        body{
          display:flex;
          justify-content:center;
          align-items:center;
          height: 100vh;
        }

/* 纯css画心形，仅使用一个div  */
        .heart{
          /* border:1px solid red; */
          height: 50px;
          width: 50px;
          background:pink;
          /* transform:rotate(225deg); */
          transform:rotate(-135deg);
          transition:all 1s;
        }

        .heart::before{
          position:absolute;
          content:"";
          height: 50px;
          width: 50px;
          /* border:1px solid blue; */
          background:pink;
          border-radius:50%;
          transform:translateX(24px);
        }

        .heart::after{
          position:absolute;
          content:"";
          height: 50px;
          width: 50px;
          /* border:1px solid blue; */
          background:pink;
          border-radius:50%;
          transform:translateY(24px);
        }

        .heart:hover{
          transform:rotate(-135deg) scale(1.2);
        }
    </style>
</head>

<body>
    <div class="heart"></div>
</body>

</html>
